<template>
  <div class="collectDetail-container">
		<div class="mainDetails">
			<!--banner-->
			<div id="slideBox" class="slideBox">
				<div class="bd">
					<div class="tempWrap pr">
						<ul>
							<li>
								<div class="pr">
									<img src="../../assets/images/info/banner.jpg">
									<div class="o-time mt5 f13">
										<span class="kttext">距离直采结束:</span>
										<span class="lxftime-end" endtime="2018/02/02 00:00:00"><span class="day">3</span><em>天</em><span class="hour">12</span><em>时</em><span class="mini">58</span><em>分</em><span class="sec">03</span><em>秒</em></span>
									</div>
								</div>
							</li>
						</ul>
						<!--banner圆点-->
						<div class="pagination">
							<span class="pagination-bullet"></span>
							<span class="pagination-bullet"></span>
							<span class="pagination-bullet"></span>
							<span class="pagination-bullet pagination-active"></span>
							<span class="pagination-bullet"></span>
						</div>
					</div>
				</div>
			</div>
			<div class="detail-box">
				<!--价格 描述 库存等-->
				<div class="detailMoeny padd borderBottom">
					<div class="wbox wmiddle">
						<div class="block f15 deepRed wfl wmiddle lt">
							<span>￥<i class="newPrice">148</i></span>
							<span class="line-through f14 wfl gray originalPrice">￥188</span>
							<span class="discount">4.3折</span>
						</div>
						<div class="block gray line-through f14 rt">库存200</div>
					</div>
					<!--标题-->
					<div class="detailTitle f16">直采汤池温泉成人票，温泉+水上乐园+恒温游泳馆</div>
				</div>
			</div>
		   <!--描述-->
			<div class="detailContent">88种功能温泉池，水上乐园+恒温游泳馆 </div>
			<!--标语-->
			<div class="slogan padd">
				<b class="icon_hand"></b>
				<span>集结消费者的力量丨比团购价更低</span>
			</div>
				<!--活动-->
			<div class="activity padd">
				<div class="wbox wmiddle mb15">
					<span class="gray f14">活动</span>
					<b class="activity_red f12 block">立减</b>
					<span class="activity_det f13 block wfl">下单大件会再补贴60元</span>
				</div>
				<div class="wbox wmiddle">
					<b class="activity_red f12 block marginL">限购</b>
					<span class="activity_det f13 block wfl">每名会员最多购买2张，同一个ID和手机视为一名会员！</span>
				</div>
			</div>
			
			<!--选择-->
			<div class="choice wbox f14 wmiddle padd">
				<div class="gray">已选</div>
				<div class="choiceText wfl">汤池温泉成人票</div>
			</div>
			<!--直采须知-->
			<div class="collectTips">
				<h2 class="f15 borderBottom">直采须知</h2>
				<div class="collectTips_d">
					<span class="gray">有效期：</span>
					<p class="tipsCont">2018.1.16 至 2018.3.31（周末、法定节假日通用）</p>
					<span class="gray">使用时间：</span>
					<p class="tipsCont">9:30-24:00，周末、节假日不限，过年期间正常使用</p>
					<span class="gray">预约提醒：</span>
					<p class="tipsCont">过年期间正常使用</p>
					<span class="gray">使用提醒：</span>
					<ul class="tipsCont">
						<li>1、88种功能温泉池，水上乐园+恒温游泳馆</li>
						<li>2、实际支付费用在直采价140元/张基础，大件会每 张票再补贴60元，有效期至2018年3月31日</li>
					</ul>
				</div>
			</div>
		
			<!--商家信息-->
			<div class="merchant">
				<div class="borderBottom wbox merchant_c">
					<div class="merchantTitle wfl">
						<p>汤池温泉度假村</p>
					</div>
					<div class="kefu wbox wmiddle">
						<i class="wfl"></i>
						<a href="tel:400-008-1717">联系商家</a>
					</div>
				</div>
				<div class="merchantAddress gray">湖北省应城市汤池镇温泉西路121号 ，近鄂中革命烈士纪念馆</div>
				
			</div>
		
			<!--商品详情-->
			<div class="productDetails">
				<div class="hd">
					<h3>-商品详情-</h3>
				</div>
				<div class="bd">
					
				</div>
			</div>
			<!--底部按钮-->
			<!-- <div class="collectFooter">
				<a class="whiteBtn f16">联系客服</a>
				<button class="btn redBtn f16">立即购买</button>
				<button class="btn grayBtn f16">即将开始</button>
			</div> -->
			<!--置顶-->
			<div class="Stick">
				<a href="#"><img src="../../assets/images/info/zhiding@2x.png" alt="" /></a>
			</div>
		</div>
		<router-link to="/info/collectApply">线下直采详情</router-link>
</div>
</template>
<script>
export default {
  data() {
	  return {

	  }
  },
  created() {
	  this.onLineDetail()
  },
  methods: {
	  async onLineDetail(areaId) {
		let data = {
		goodsId: 14,
		token: '',
		loginType: 0
	  }
	  let res = await fetch("/api/goodsInfo2 ", data)
	  console.log(res)
	  if(res.code == 200) {
		//   this.collectObj = res.obj.collectVo
	  }
	  }
  }
}
</script>
<style scoped>
.collectDetail-container {
	text-align: left;
	font-size: 14px;
}

.block{
	display: block;
}
.gray{
	color: #888888;
}
.padd{
	padding:0 16px;
}
.line-through{
	text-decoration: line-through;
}
.deepRed{
	color: #da1a1e;
}
.borderBottom{
	border-bottom: 1px solid rgba(238, 238, 238, 1);
}
/*banner——start*/
.slideBox .bd li .o-time {
    position: absolute;
    width: 100%;
    text-align: center;
    height: 35px;
    line-height: 35px;
    background-color: rgba(218, 26, 30, 1);
	opacity: 0.8;
    color: #fff;
    bottom: 0;
}
.slideBox .bd li .o-time em{
	font-style: normal;
}
.slideBox .tempWrap .pagination{
    position: absolute;
    z-index: 1;
    bottom: 47px;
    right: 16px;
     width: 100%;
    text-align: right;
    line-height: 0;
}
.slideBox .tempWrap .pagination .pagination-bullet{
	display: inline-block;
	width: 6px;
    height: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 1);
    opacity: 0.9;
    margin: 0 4px;
    vertical-align: top;
    overflow: hidden;
}
.slideBox .tempWrap .pagination .pagination-active{
	background-color: rgba(218, 26, 30, 1);
}
/*banner——end*/
.mainDetails .detail-box{
	
}
.mainDetails .detailMoeny{
	background-color: #fff;
	padding-top:21px;
}
.mainDetails .detailMoeny .lt{
	line-height: 0;
}
.mainDetails .detail-box span .newPrice{
	font-size: 24px;
}
.mainDetails .detailMoeny .originalPrice{
	margin-left: 11px;
}
.mainDetails .detailMoeny .discount{
	width: 38px;
	height: 17px;
	background-color: rgba(216, 183, 141, 1);
	border-radius: 2px;
	color: #fff;
	font-size: 11px;
	padding:3px 6px;
	margin-left: 11px;
}
.mainDetails .detail-box .detailTitle{
	color: #27272b;
	margin-top:20px;
	margin-bottom: 11.5px;
}
.mainDetails .detailContent{
	padding:12px 16px 15px 16px;
	background-color: #fff;
}
/*标语*/
.mainDetails .slogan{
	height: 50px;
	line-height: 50px;
	background-color: rgba(255, 243, 243, 1);
	color: #333333;
	margin-top: 12px;
}
.mainDetails .slogan .icon_hand{
	display: inline-block;
	width: 20px;
	height: 17px;
	background: url(../../assets/images/info/jijie@2x.png) no-repeat;
	background-size: cover;
	vertical-align: sub;
	margin-right: 16.5px;
}
/*活动*/
.mainDetails .activity{
	background-color: #fff;
	color: #555;
	height: 94px;
	padding: 17.5px 16px;
	box-sizing: border-box;
}
.mainDetails .activity .activity_red{
	display: inline-block;
	font-weight: normal;
	width: 38px;
	height: 17px;
	line-height: 17px;
	background-color: rgba(255, 243, 243, 1);
	border-radius: 2px;
	border: solid 1px rgba(218, 26, 30, 1);
	text-align: center;
	margin:0 12.5px 0 16px;
	color: #da1a1e;
}
.mainDetails .activity .activity_det{
	color: #555555;
}
.mainDetails .activity .marginL{
	margin-left: 47.5px;
}
/*选择*/
.mainDetails .choice {
	position: relative;
	height: 45px;
	line-break: 45px;
	background-color: #fff;
	margin: 12px 0;
}
.mainDetails .choice .choiceText{
	color: #333333;
	margin-left: 16px;
}
.mainDetails .choice:after{
	content: '';
    width: 9px;
    height: 9px;
    font-size: 0;
    position: absolute;
    top: 50%;
    right: 18px;
    margin-top: -4.5px;
    border-right: 1px solid #888;
    border-top: 1px solid #888;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.mainDetails .collectTips{
	padding-left:17px;
	background-color: #fff;
}
.mainDetails .collectTips .collectTips_d{
	margin-top: 11.5px;
}
.mainDetails .collectTips>h2{
	font-weight: normal;
	color: #333333;
	padding: 16px 0;
}
 .collectTips .tipsCont,.pinTips .tipsCont{
	padding-left: 20px;
	color: #333;
	font-size: 14px;
	margin:10px 0;
}
.mainDetails .collectTips .tipsCont li{
	padding-bottom: 15px;
}
/*商家信息*/
.mainDetails .merchant{
	background-color: #fff;
	margin: 12px 0;
	padding-left: 16px;
}
.mainDetails .merchant .merchant_c{
	height: 42px;
	line-height: 42px;
}
.mainDetails .merchant .kefu{
	padding-right: 16px;
	
}
.mainDetails .merchant .kefu>i{
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url(../../assets/images/info/zitidianhua@2x.png);
	background-size: cover;
	
}
.mainDetails .merchant .kefu>a{
	color: #caab83;
}
.mainDetails .merchant .merchantAddress{
	padding: 12px 0;
}
/*商品详情*/
.productDetails{
	background-color: #fff;
	margin-bottom: 65px;
}
.productDetails .hd{
	box-shadow: 0px 0px 20px 0px rgba(96, 96, 96, 0.1);
}
.productDetails .hd h3{
	font-weight: normal;
	color: #333333;
	text-align: center;
	height: 51px;
	line-height: 51px;
}
/*底部按钮*/
 .collectFooter{
	position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 65px;
    background-color: rgba(255, 255, 255, 1);
	box-shadow: 0px 0px 20px 0px rgba(96, 96, 96, 0.1);
    padding: 10px 16px;
    box-sizing: border-box;
    display: -webkit-flex;
    flex-direction:wrap;
}
 .collectFooter .whiteBtn{
	height: 46px;
	line-height: 46px;
	background-color: rgba(255, 255, 255, 1);
	border-radius: 5px;
	border: solid 1px rgba(204, 204, 204, 1);
	color: #333333;
	text-align: center;
	box-sizing: border-box;
	flex: 0 0 109px;
}
 .collectFooter .btn{
	color: #fff;
	margin-left: 16px;
	border-radius: 5px;
	height: 46px;
    line-height: 46px;
    flex: 1;
 }
 .collectFooter .redBtn{
 	background-color: rgba(218, 26, 30, 1);
 }
  .collectFooter .grayBtn{
	background-color: rgba(204, 204, 204, 1);
	display: none;
  }
/*置顶*/
.Stick{
	position: fixed;
	bottom: 12%;
    right:4%;
}
.Stick img{
	width:45px;
	height: 45px;
}

/*线下直采详情页-已报名与未登录*/
.warpperT .zs_wrap {
    padding: 12px;
}
.applyMain {
	padding:0 16px;
	background-color: #fff;
	padding-bottom: 16px;
}
.applyMain .appltT{
	color: #27272b;
	padding: 16px 0;
}
.applyMain .applyPeople {
	margin-bottom: 10px;
}
.applyMain .wbox_img .wbox_ren{
	width: 15px;
	height: 12px;
	margin-right: 7px;
	padding-left: 16px;
}
.applyMain .quantity{
	height: 40px;
	background-color: rgba(244, 244, 244, 1);
	border-radius: 2px;
	position: relative;
}
.applyMain .quantity:before{
	position: absolute;
    top: -19px;
    left: 10px;
	content: '';
	width: 0px;
    height: 0px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #f4f4f4 transparent;
}
/*滚动*/
.gundong_list{
	height: 24px;
	line-height: 24px;
	overflow: hidden;
}
.gundong_list span{
	margin-right: 55px;
}
.solid{
	margin-left: 16px;
}
.pinTips{
	padding: 17px;
	background-color: #fff;
}
.pinTips .iconic{
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url(../../assets/images/info/yujikaituan@2x.png) no-repeat;
	background-size: cover;
	margin-right: 6.5px;
	vertical-align: middle;
}
.pinTips .iconic2{
	background: url(../../assets/images/info/zhicaididian@2x.png) no-repeat;
	background-size: cover;
}
.pinTips .iconic3{
	background: url(../../assets/images/info/zhicaijiage@2x.png) no-repeat;
	background-size: cover;
}
.pinTips .wenhao{
	display: inline-block;
	width: 15px;
	height: 15px;
	background: url(../../assets/images/info/wenhao.png) no-repeat;
	background-size: cover;
	margin-left: 6.5px;
	vertical-align: sub;
}

</style>

